<!-- <template>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="名称">
        <template #default="{ row }">
          <el-tooltip
            ref="tooltip"
            content="这是提示内容"
            placement="top"
            persistent
            v-model:visible="tooltipVisible"
          >
            <span
              class="cell"
              @mouseenter="showTooltip"
              @mouseleave="hideTooltip"
            >
              {{ row.name }}
            </span>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue';
  
  const tableData = ref([
    { name: 'John Doe with a very long name that overflowsJohn Doe with a very long name that overflowsJohn Doe with a very long name that overflowsJohn Doe with a very long name that overflows' },
    { name: 'Jane Smith' },
  ]);
  
  const tooltipVisible = ref(false);
  
  const showTooltip = () => {
    tooltipVisible.value = true;
  };
  
  const hideTooltip = () => {
    setTimeout(() => {
      tooltipVisible.value = false;
    }, 200); // 延迟隐藏 Tooltip，防止快速闪烁
  };
  </script>
  
  <style>
  .cell {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  </style> -->
  <!-- <template>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="名称">
        <template #default="{ row }">
          <el-tooltip
            content="这是提示内容"
            placement="top"
            append-to-body
            trigger="manual"
            :visible="hoveredRow === row"
          >
            <span
              class="cell"
              @mouseenter="hoveredRow = row"
              @mouseleave="hoveredRow = null"
            >
              {{ row.name }}
            </span>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue';
  
  const tableData = ref([
    { name: 'John Doe with a very long name that overflows' },
    { name: 'Jane Smith' },
  ]);
  
  // 当前悬停的行
  const hoveredRow = ref<null | Record<string, any>>(null);
  </script>
  
  <style>
  .cell {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  </style> -->